<template>
    <div class="open_cupboard">
        <top-timer :back="false" :second="240"/>
        <p class="font_M font_40 col_333 title center">箱门已开,请清扫柜门</p>
        <p class="font_30 col_777 tips center">清扫完成后请关闭柜门</p>
        <div class="frame font_28 center">
            <div class="row">
                <div class="t80_240" :class="arrObj[0].isOpen?'is_open':''">g1</div>
                <div class="t80_240" :class="arrObj[1].isOpen?'is_open':''">g2</div>
                <div class="t80_240" :class="arrObj[2].isOpen?'is_open':''">g3</div>
                <div class="t160_240 font_28">显示屏</div>
                <div class="t80_240" :class="arrObj[3].isOpen?'is_open':''">g4</div>
                <div class="t160_240">
                    <div class="t160_80" :class="arrObj[4].isOpen?'is_open':''">d1</div>
                    <div class="t160_80" :class="arrObj[5].isOpen?'is_open':''">d2</div>
                    <div class="t160_80" :class="arrObj[6].isOpen?'is_open':''">d3</div>
                </div>
                <div class="t80_240" :class="arrObj[7].isOpen?'is_open':''">g5</div>
                <div class="t80_240" :class="arrObj[8].isOpen?'is_open':''">g6</div>
                <div class="t80_240" :class="arrObj[9].isOpen?'is_open':''">g7</div>
                <div class="t80_240" :class="arrObj[10].isOpen?'is_open':''">g8</div>
            </div>
            <div class="row">
                <div class="t80_240" :class="arrObj[11].isOpen?'is_open':''">g9</div>
                <div class="t80_240" :class="arrObj[12].isOpen?'is_open':''">g10</div>
                <div class="t80_240" :class="arrObj[13].isOpen?'is_open':''">g11</div>
                <div class="t160_240">
                    <div class="t160_80 font_28">扫码处</div>
                    <div class="t160_160" :class="arrObj[14].isOpen?'is_open':''">b1</div>
                </div>
                <div class="t80_240" :class="arrObj[15].isOpen?'is_open':''">g12</div>
                <div class="t160_240">
                    <div class="t160_80" :class="arrObj[16].isOpen?'is_open':''">d4</div>
                    <div class="t160_80" :class="arrObj[17].isOpen?'is_open':''">d5</div>
                    <div class="t160_80" :class="arrObj[18].isOpen?'is_open':''">d6</div>
                </div>
                <div class="t80_240" :class="arrObj[19].isOpen?'is_open':''">g13</div>
                <div class="t80_240" :class="arrObj[20].isOpen?'is_open':''">g14</div>
                <div class="t80_240" :class="arrObj[21].isOpen?'is_open':''">g15</div>
                <div class="t80_240" :class="arrObj[22].isOpen?'is_open':''">g16</div>
            </div>
            <div class="row">
                <div class="t80_80" :class="arrObj[23].isOpen?'is_open':''">x1</div>
                <div class="t80_80" :class="arrObj[24].isOpen?'is_open':''">x2</div>
                <div class="t80_80" :class="arrObj[25].isOpen?'is_open':''">x3</div>
                <div class="t80_80" :class="arrObj[26].isOpen?'is_open':''">x4</div>
                <div class="t80_80" :class="arrObj[27].isOpen?'is_open':''">x5</div>
                <div class="t80_80" :class="arrObj[28].isOpen?'is_open':''">x6</div>
                <div class="t160_80" :class="arrObj[29].isOpen?'is_open':''">d7</div>
                <div class="t80_80" :class="arrObj[30].isOpen?'is_open':''">x7</div>
                <div class="t80_80" :class="arrObj[31].isOpen?'is_open':''">x8</div>
                <div class="t80_80" :class="arrObj[32].isOpen?'is_open':''">x9</div>
                <div class="t80_80" :class="arrObj[33].isOpen?'is_open':''">x10</div>
            </div>
        </div>
        <top-tips/>
    </div>
</template>
<script>
  export default {
    name: 'clean-open-cupboard',
    data () {
      return {
        openDoorNum: '',
        arr: [
          'g1',
          'g2',
          'g3',
          'g4',
          'd1',
          'd2',
          'd3',
          'g5',
          'g6',
          'g7',
          'g8',
          'g9',
          'g10',
          'g11',
          'b1',
          'g12',
          'd4',
          'd5',
          'd6',
          'g13',
          'g14',
          'g15',
          'g16',
          'x1',
          'x2',
          'x3',
          'x4',
          'x5',
          'x6',
          'd7',
          'x7',
          'x8',
          'x9',
          'x10',
        ],
        queryInterval: null,
        intervals: [],
        boxArr: '',
        count: 0,
        arrObj: [],
      }
    },
    destroyed () {
      for (let obj of this.arrObj) {
        if (obj.interval != null)
          clearInterval(obj.interval)
      }
    },
    created () {
      this.boxArr = JSON.parse(this.$route.query.arr)
      this.type = this.$route.query.type
      this.count = this.boxArr.length
      for (let boxCode of this.arr) {
        let index = this.boxArr.map(item=>item.boxCode).indexOf(boxCode)
        let isOpen = index > -1
        this.arrObj.push({
          boxCode: boxCode,
          isOpen: isOpen,
          interval: isOpen ? this.createInterval(boxCode) : null,
          boxMac: this.$boxConfig[boxCode],
          boxDetailId: isOpen ? this.boxArr[index].boxDetailId : null,
        })
      }
    },
    methods: {
      closeBoxByPickup (boxDetailId) {
        this.$axios.post('cleanRest/createCloseBox', {
          boxDetailId: boxDetailId,
        }).then(res => {
          if (res.data.result) {
            if (this.count === 0) {
              this.$router.push({
                path: 'cleanBox',
              })
            }
          } else {
            this.$alert(res.data.msg || '关箱错误')
          }
        })
      },
      createInterval (boxCode) {
        return setInterval(() => {
          let success = (res) => {
            let resObj = res
            //已关箱
            if (!resObj.isOpen) {
              for (let obj of this.arrObj) {
                if (obj.boxMac[0] === resObj.boardId && obj.boxMac[1] === resObj.portId) {
                  obj.isOpen = false
                  clearInterval(obj.interval)
                  obj.interval = null
                  this.count--
                  this.closeBoxByPickup(obj.boxDetailId)
                }
              }
            }
          }
          let error = (res) => {
            alert('关箱失败' + res)
          }
          let boxMac = this.$boxConfig[boxCode]
          window.cordova.plugins.CabinetPlugin.sendQueryCommand2(boxMac, success, error)
        }, 100)
      },
    },
  }
</script>

<style lang="scss">
    .open_cupboard {
        .title {
            margin: 0.40rem 0 0.20rem;
        }

        .tips {
            margin-bottom: 0.40rem;
        }

        .frame {
            margin: 0 0.60rem;
            overflow: hidden;

            .row {
                overflow: hidden;

                &:first-of-type {
                    > div {
                        border-top: 0.02rem solid #979797;
                    }

                    > div:first-of-type {
                        border-top-left-radius: 0.16rem;
                    }

                    > div:last-of-type {
                        border-top-right-radius: 0.16rem;
                    }
                }

                &:last-of-type {
                    > div:first-of-type {
                        border-bottom-left-radius: 0.16rem;
                    }

                    > div:last-of-type {
                        border-bottom-right-radius: 0.16rem;
                    }
                }

                div {
                    float: left;
                    display: inline-block;
                    border-bottom: 0.02rem solid #979797;
                    border-right: 0.02rem solid #979797;
                }

                > div:first-of-type {
                    border-left: 0.02rem solid #979797;
                }
            }
        }

        .t80_240 {
            width: 0.80rem;
            height: 2.40rem;
        }

        .t160_240 {
            width: 1.60rem;
            height: 2.40rem;
        }

        .t160_80 {
            width: 1.60rem;
            height: 0.80rem;
        }

        .t160_160 {
            width: 1.60rem;
            height: 1.60rem;
        }

        .t80_80 {
            width: 0.80rem;
            height: 0.80rem;
        }

        .is_open {
            background-color: #d9ebfe;
        }

        .tou_btn {
            font-size: 0.4rem;
            color: #fff;
            margin: 0.5rem auto;
            width: 2.40rem;
            height: 0.8rem;
            background: rgba(10, 130, 236, 1);
            box-shadow: 0 0.02rem 0.04rem 0 rgba(10, 130, 236, 0.2);
            border-radius: 0.5rem;
            line-height: 0.8rem;
        }
    }
</style>